/*
 * Wandu CSS for HTML5
 * - 작성자 : wanE (wan2land@gmail.com)
 * - 최종수정 : 2012.07.13
 */

/* init */
@charset "utf-8";

@import url('init.css');

hr {margin:10px 0;border:0;border-top:1px solid #ccc;border-bottom:1px solid #fff;}
.border-top {border-top:1px solid #ccc;padding-top:10px;margin-top:10px;}
.border-bottom {border-bottom:1px solid #ccc;padding-bottom:10px;margin-bottom:10px;}

/* ETC */
.inner {padding:10px;}
.outer {padding:-10px;}
.fixed {position:fixed;top:0;left:0;}
.align-center {text-align:center;}
.align-right {text-align:right;}

/* Grid */
.wrap {margin-left:auto;margin-right:auto;width:1020px;}
.in-wrap:after,
.wrap:after {clear:both;display:table;content:"";}

.in-wrap {margin-left:-10px;margin-right:-10px;}

.in-wrap > *,
.wrap > * {margin-left:10px;width:1000px;}
.in-wrap > [class*="grid"],
.wrap > [class*="grid"] {margin-right:10px;float:left;}

.wrap > .in-wrap {margin:0;width:1020px;}

.clear {clear:both;}

.grid1 {width:65px}
.grid2 {width:150px}
.grid3 {width:235px}
.grid4 {width:320px}
.grid5 {width:405px}
.grid6 {width:490px}
.grid7 {width:575px}
.grid8 {width:660px}
.grid9 {width:745px}
.grid10 {width:830px}
.grid11 {width:915px}
.grid12 {width:1000px}

.enter:after {clear:both;content:"";display:table;}

.gap1 {margin-left:95px;}
.gap2 {margin-left:180px;}
.gap3 {margin-left:265px;}
.gap4 {margin-left:350px;}
.gap5 {margin-left:435px;}
.gap6 {margin-left:520px;}
.gap7 {margin-left:605px;}
.gap8 {margin-left:690px;}
.gap9 {margin-left:775px;}
.gap10 {margin-left:860px;}
.gap11 {margin-left:945px;}

.vertical-middle {display:table;height:100%;}
.vertical-middle-contents {display:table-cell;vertical-align:middle;}

/* form */
form {margin-bottom:15px;}
form fieldset > legend {font-size:20px;padding-top:5px;padding-bottom:5px;border-bottom:1px solid #ccc;width:100%;margin-bottom:10px;color:#333;}
form fieldset > div {margin-bottom:10px;}
form fieldset > div > label {height:30px;line-height:30px;vertical-align:middle;width:65px;text-align:right;float:left;}
form fieldset > div > label > strong {color:#f00;font-weight:bold;}
form fieldset > div > div.controls {margin-left:85px;line-height:30px;font-size:0;}
form fieldset > div > div.controls {}
form fieldset > div > div.controls label {display:inline-block;height:18px;line-height:18px;font-size:12px;padding-top:6px;padding-bottom:6px;margin-right:10px;}
form fieldset > div > div.controls label > input {vertical-align:middle;}
form fieldset > div:after {clear:both;display:table;content:"";}

form div.submit {border-top:1px solid #ccc;padding-top:10px;text-align:right;}
/* input */

button,
input[type="button"],input[type="submit"],
input[type="text"],input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
[class*=btn],
select,textarea {
	display:inline-block;
	vertical-align:top;
	line-height:18px;
	font-size: 13px;
	padding:5px;

	text-decoration:none;

	border:1px solid #aaa;
	border-radius:5px;
	color:#000;

		    box-shadow:inset 1px 1px 0 #eee;
	   -moz-box-shadow:inset 1px 1px 0 #eee;
	-webkit-box-shadow:inset 1px 1px 0 #eee;
	-webkit-transition:box-shadow .2s, border-color .2s;
}

input[type=button],
input[type=submit],
button,
[class*=btn] {
	height:30px;
	
		    box-shadow:inset 1px 1px 0 #fce2c1;
	   -moz-box-shadow:inset 1px 1px 0 #fce2c1;
	-webkit-box-shadow:inset 1px 1px 0 #fce2c1;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
	background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
	background-color:#ffc477;

	border:1px solid #eeb44f;
	color:#fff;

	text-shadow:1px 1px 0px #cc9f52;
	text-align:center;
}

input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] { width:138px;height:18px; }
textarea { width:138px; }
select { height:30px; }

/* text, textarea grid(-12px) */
input.grid1[type="text"],
input.grid1[type="password"],
input.grid1[type="datetime"],
input.grid1[type="datetime-local"],
input.grid1[type="date"],
input.grid1[type="month"],
input.grid1[type="time"],
input.grid1[type="week"],
input.grid1[type="number"],
input.grid1[type="email"],
input.grid1[type="url"],
input.grid1[type="search"],
input.grid1[type="tel"],
input.grid1[type="color"],
textarea.grid1 {width:53px;}

input.grid2[type="text"],
input.grid2[type="password"],
input.grid2[type="datetime"],
input.grid2[type="datetime-local"],
input.grid2[type="date"],
input.grid2[type="month"],
input.grid2[type="time"],
input.grid2[type="week"],
input.grid2[type="number"],
input.grid2[type="email"],
input.grid2[type="url"],
input.grid2[type="search"],
input.grid2[type="tel"],
input.grid2[type="color"],
textarea.grid2 {width:138px;}

input.grid3[type="text"],
input.grid3[type="password"],
input.grid3[type="datetime"],
input.grid3[type="datetime-local"],
input.grid3[type="date"],
input.grid3[type="month"],
input.grid3[type="time"],
input.grid3[type="week"],
input.grid3[type="number"],
input.grid3[type="email"],
input.grid3[type="url"],
input.grid3[type="search"],
input.grid3[type="tel"],
input.grid3[type="color"],
textarea.grid3 {width:223px;}

input.grid4[type="text"],
input.grid4[type="password"],
input.grid4[type="datetime"],
input.grid4[type="datetime-local"],
input.grid4[type="date"],
input.grid4[type="month"],
input.grid4[type="time"],
input.grid4[type="week"],
input.grid4[type="number"],
input.grid4[type="email"],
input.grid4[type="url"],
input.grid4[type="search"],
input.grid4[type="tel"],
input.grid4[type="color"],
textarea.grid4 {width:308px;}

input.grid5[type="text"],
input.grid5[type="password"],
input.grid5[type="datetime"],
input.grid5[type="datetime-local"],
input.grid5[type="date"],
input.grid5[type="month"],
input.grid5[type="time"],
input.grid5[type="week"],
input.grid5[type="number"],
input.grid5[type="email"],
input.grid5[type="url"],
input.grid5[type="search"],
input.grid5[type="tel"],
input.grid5[type="color"],
textarea.grid5 {width:393px;}

input.grid6[type="text"],
input.grid6[type="password"],
input.grid6[type="datetime"],
input.grid6[type="datetime-local"],
input.grid6[type="date"],
input.grid6[type="month"],
input.grid6[type="time"],
input.grid6[type="week"],
input.grid6[type="number"],
input.grid6[type="email"],
input.grid6[type="url"],
input.grid6[type="search"],
input.grid6[type="tel"],
input.grid6[type="color"],
textarea.grid6 {width:478px;}

input.grid7[type="text"],
input.grid7[type="password"],
input.grid7[type="datetime"],
input.grid7[type="datetime-local"],
input.grid7[type="date"],
input.grid7[type="month"],
input.grid7[type="time"],
input.grid7[type="week"],
input.grid7[type="number"],
input.grid7[type="email"],
input.grid7[type="url"],
input.grid7[type="search"],
input.grid7[type="tel"],
input.grid7[type="color"],
textarea.grid7 {width:563px;}

input.grid8[type="text"],
input.grid8[type="password"],
input.grid8[type="datetime"],
input.grid8[type="datetime-local"],
input.grid8[type="date"],
input.grid8[type="month"],
input.grid8[type="time"],
input.grid8[type="week"],
input.grid8[type="number"],
input.grid8[type="email"],
input.grid8[type="url"],
input.grid8[type="search"],
input.grid8[type="tel"],
input.grid8[type="color"],
textarea.grid8 {width:648px;}

input.grid9[type="text"],
input.grid9[type="password"],
input.grid9[type="datetime"],
input.grid9[type="datetime-local"],
input.grid9[type="date"],
input.grid9[type="month"],
input.grid9[type="time"],
input.grid9[type="week"],
input.grid9[type="number"],
input.grid9[type="email"],
input.grid9[type="url"],
input.grid9[type="search"],
input.grid9[type="tel"],
input.grid9[type="color"],
textarea.grid9 {width:733px;}

input.grid10[type="text"],
input.grid10[type="password"],
input.grid10[type="datetime"],
input.grid10[type="datetime-local"],
input.grid10[type="date"],
input.grid10[type="month"],
input.grid10[type="time"],
input.grid10[type="week"],
input.grid10[type="number"],
input.grid10[type="email"],
input.grid10[type="url"],
input.grid10[type="search"],
input.grid10[type="tel"],
input.grid10[type="color"],
textarea.grid10 {width:818px;}

input.grid11[type="text"],
input.grid11[type="password"],
input.grid11[type="datetime"],
input.grid11[type="datetime-local"],
input.grid11[type="date"],
input.grid11[type="month"],
input.grid11[type="time"],
input.grid11[type="week"],
input.grid11[type="number"],
input.grid11[type="email"],
input.grid11[type="url"],
input.grid11[type="search"],
input.grid11[type="tel"],
input.grid11[type="color"],
textarea.grid11 {width:903px;}

input.grid12[type="text"],
input.grid12[type="password"],
input.grid12[type="datetime"],
input.grid12[type="datetime-local"],
input.grid12[type="date"],
input.grid12[type="month"],
input.grid12[type="time"],
input.grid12[type="week"],
input.grid12[type="number"],
input.grid12[type="email"],
input.grid12[type="url"],
input.grid12[type="search"],
input.grid12[type="tel"],
input.grid12[type="color"],
textarea.grid12 {width:988px;}

textarea:focus,
select:focus,
input:focus {
	border-color:#5d8eff;
	-webkit-box-shadow:inset 1px 1px 0 #eee, 0 0 10px rgba(148,221,243,0.82);
	   -moz-box-shadow:inset 1px 1px 0 #eee, 0 0 10px rgba(148,221,243,0.82);
	        box-shadow:inset 1px 1px 0 #eee, 0 0 10px rgba(148,221,243,0.82);
}
textrea:focus:required:invalid,
input:focus:required:invalid {
	border-color:#f22121;
	-webkit-box-shadow:inset 1px 1px 0 #eee, 0 0 10px rgba(236,105,105,0.83);
	   -moz-box-shadow:inset 1px 1px 0 #eee, 0 0 10px rgba(236,105,105,0.83);
	        box-shadow:inset 1px 1px 0 #eee, 0 0 10px rgba(236,105,105,0.83);
}


.link {background:#fff;border:0;padding:0;font-size:12px;color:#f7941d;cursor:pointer} /**/
.link:hover {text-decoration:underline;}





/* Table */

table {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

table.view-vertical {margin-left:auto;margin-right:auto;border-top:3px solid #ccc;}
table.view-vertical tr > th {padding:7px 10px;color:#333;text-align:left;font-size:13px;font-weight:normal;background:#eee;border-bottom:1px solid #ccc}
table.view-vertical tr > td {padding:7px 10px;color:#555;font-size:12px;border-bottom:1px solid #ccc}

table.view-form {width:100%}
table.view-form th {text-align:right;padding:0 7px;}
table.view-form td {padding:0;line-height:25px;}
table.view-form strong {font-weight:normal;color:#e00}


figure > figcaption {padding:5px;font-size:15px;display:block;width:auto;margin-left:auto;margin-right:auto;}
figure.icon {padding:10px 0;}
figure.icon:hover > figcaption {color:#f7941d;}


/* Put a border around prettyprinted code snippets. */
pre.prettyprint { border: 1px solid #ccc;margin-bottom:10px;margin-top:0;background:#f5f5f5;color:#a0a0a0;font-size:11px;overflow:hidden;}
pre.prettyprint > ol.linenums { padding:9px 3px;list-style:decimal;margin-left:30px;background:#fff;}
pre.prettyprint > ol.linenums >li {padding:0px 0px;white-space:pre;}
pre.prettyprint > ol.linenums >li:hover {background:#fffeef;}



.pln { color: #000 }  /* plain text */
.str { color: #080 }  /* string content */
.kwd { color: #008 }  /* a keyword */
.com { color: #800 }  /* a comment */
.typ { color: #606 }  /* a type name */
.lit { color: #066 }  /* a literal value */
.pun { color: #fff }
.opn { color: #fff }
.clo { color: #660 }
.tag { color: #075eb6 }  /* a markup tag name */
.atn { color: #0699da }  /* a markup attribute name */
.atv { color: #709c5f }  /* a markup attribute value */
.dec, .var { color: #606 }  /* a declaration; a variable name */
.fun { color: red }  /* a function name */



div.alert {
	color:#b94a48;
	background-color:#f2dede;
	border:1px solid #eed3d7;
	padding:8px 35px 8px 14px;
	margin-bottom:10px;
	border-radius:4px;
}
div.alert span.close {
	display:block;
	position:absolute;
	right:10px;
	top:8px;
	color:#888;
	cursor:pointer;	
}
div.alert form {margin-bottom:0;}
div.alert .msg {margin-bottom:10px;}
div.alert .buttons {text-align:center;}
div.alert button, div.alert input[type=button], div.alert input[type=submit] {
	width:50px;margin:0 2px;
}


#blind {position:fixed;width:100%;height:100%;top:0;left:0;display:none;background:rgba(0,0,0,0.2);}

ul.aside {list-style:none;border-left:10px solid #f7941d}
ul.aside li {margin:0;padding:0;border-bottom:1px solid #ddd;}
ul.aside li.thumb {font-size:16px;line-height:20px;color:#777;padding:8px 0 8px 15px;font-weight:bold}

ul.aside li > a {display:block;font-size:14px;line-height:20px;color:#999;padding:8px 0 8px 20px}
ul.aside li > a:hover {color:#f7941d;}
